import React from "react";
import { Tabs } from "antd";
import styles from "./index.less";
import RunningVariable from "../components/variablelist/RunningVariable";
import HistoricVariable from "../components/variablelist/HistoricVariable";

const { TabPane } = Tabs;

export default class Variablelist extends React.Component {
  state = {
    key: "FlowMonitor/runningVariableList",
    // eslint-disable-next-line react/no-unused-state
    page: { pageSize: 10, pageNum: 1 },
  };

  componentDidMount() {
    const {
      location: {
        query: { key = "" },
      },
    } = this.props;

    if (key) {
      this.setState({ key });
    }
  }

  handleChange = (key) => {
    this.setState({ key });
  };

  render() {
    const { location } = this.props;
    const { key } = this.state;
    return (
      <div className={styles.root}>
        <Tabs
          defaultActiveKey="FlowMonitor/runningVariableList"
          activeKey={key}
          onChange={this.handleChange}
        >
          <TabPane tab="运行中变量" key="FlowMonitor/runningVariableList">
            <RunningVariable />
          </TabPane>
          <TabPane tab="历史变量" key="FlowMonitor/historicVariableList">
            <HistoricVariable location={location} />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
